<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>合同-账单</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/index_team.css">
	<script src="/js/jquery-2.1.1.min.js"></script>
	<script src="/js/plugin/layui/layui.js"></script>
</head>
<style>
	html,body{
		height:auto;
	} 
	 .layui-table-view .layui-table td,.layui-table-view .layui-table th {padding:10px 0px;} 
	 .layui-table-cell{height: 100%;line-height: 20px;} 
</style>
<body>
	<div class="layui-form">
		<div class="layui-input-inline">
			<select name="state" lay-filter="state" >
				<option value="">选择进度</option>
				<option value="0">待支付</option>
				<option value="1">已支付</option>
			</select>
		</div>
		<div class="layui-input-inline">
			<select name="type" lay-filter="type" >
				<option value="">账单类型</option>
				<option value="1">保证金</option>
				<option value="0">租金</option>
				<option value="2">退款</option>
			</select>
		</div>
		<div class="layui-inline" style="width:200px"> <!-- 注意：这一层元素并不是必须的 -->
		  <input type="text" class="layui-input" id="date" placeholder="选择日期范围" >
		</div>
	</div>
	<div class="layui-tab-content " id="teamList" style="min-height:300px">
		<table class="layui-hide" id="LAY_table_bill" lay-filter="bill"></table> 
		
		</div>
	<input type="hidden" id="teamId" name="teamId" th:value="${teamId}" />
</body>
<script>
var teamId = $("#teamId").val();
var table;
var startdate = null;
var enddate = null;
var state = null;
var type = null;
$(function(){
	
	layui.use(['element','table','layer','form','laydate'], function(){
	  var element = layui.element;
	  table = layui.table;
	  var form = layui.form;
	  var laydate = layui.laydate;
	  form.render();
	//日期范围选择
	  laydate.render({ 
	    elem: '#date'
	    ,range: '~' //range: true或 range: '~' 来自定义分割字符
    	,done: function(value, date, endDate){
    		if(value == ""){
    			startdate = null;
    			enddate = null;
    		}else{
    			startdate = value.split("~")[0];
    			enddate = value.split("~")[1];
    		}
    		tableRead();//表单重载
    	  }
	  });
	//select选择
	  form.on('select(state)', function(data){
		  state = data.value;
		  tableRead();//表单重载
		}); 
	//select选择
	  form.on('select(type)', function(data){
		  type = data.value;
		  tableRead();//表单重载
		}); 
	  element.on('tab(docNavTabBrief)', function(){
		  var target=$(this),index=$(this).index();
		  
	  });
	//方法级渲染
		table.render({
			id:'bill',
		    elem: '#LAY_table_bill',
		    url: '/app/contractReceivable/listdata',
		    where:{
		    	params:{
		    		teamId:teamId,
		    		bill:1,
		    		flag:1
		    	}
		    },
		    cols: [[
				      {field: 'status', title: '收款状态',templet:function(d){
				    	  var time = new Date().getTime()-new Date(d.receivableDate).getTime();
				    	  var days = parseInt(time/(1000 * 60 * 60 * 24));
				    	   if(d.state == 0){
				    		   if(days > 0){
				    			   return '<span style="display:inline-block;background:#e6e6e6;color:#666;padding: 5px 10px;text-align:center;">已逾期</span>'; 
				    		   }else{
				    			   return '<span style="display:inline-block;background:#f2a73d;color:#fff;padding: 5px 10px;text-align:center;">待支付</span>'; 
				    		   }
				    		  
				    	  }else{
				    		  return '<span style="display:inline-block;background:#0AC862;color:#fff;padding: 5px 10px;text-align:center;">确认核销</span>';
				    	  } 
				      }}
				      ,{field: 'fkDicReceivableType', title: '账单类型',templet:function(d){
				    	  if(d.fkDicReceivableType == 0){
				    		  return '租金';
				    	  }else if(d.fkDicReceivableType == 1){
				    		  return '押金';
				    	  }else{
				    		  return '退款';
				    	  }
				      }}
				      , {field: 'receivableNumber', title: '公司名称',width:'40%',templet:function(d){
				    	  var time = new Date().getTime()-new Date(d.receivableDate).getTime();
				    	  var days = parseInt(time/(1000 * 60 * 60 * 24));
				    	  if(days > 0 && d.state ==0){
				    		  return '<div style="color:#333">'+d.team.fullName+'<span style="color:#dd5a55"> (已逾期'+days+'天)</span><br><span>账单：'+d.receivableNumber+'</span></div>'; 
					    	  
				    	  }else{
				    		  return '<div style="color:#333">'+d.team.fullName+'</div>账单：'+d.receivableNumber; 
				    	  }
				    	  
				      }}
				      , {field: 'receivableAmount', title: '应收金额'}
				      , {field: 'receivableDate', title: '到期日期'}
				      , {field: 'paymentDate', title: '实际付款日',templet:function(d){
				    	  if(d.paymentDate){
				    		  return d.paymentDate;
				    	  }else{
				    		  return '无';
				    	  }
				      }}
				      ,{field: 'opt', title: '操作',templet:function(d){
				    	  if(d.state == 0){
				    		  return '<a href="javascript:;" class="layui-btn  layui-btn-xs layui-btn-normal" onclick=updateBillStatus("'+d.id+'")>收款</a>' 
				    	  }else{
				    		  return '已收款';
				    	  }
				    	  
				      }}
				    ]]
		    ,page: true
			,done:function(){
				setHeight()
	        }
		});
		setHeight();
		//tableBtnOpt();
	});
	
	
})
/* function tiaozhuan(id){
	var iframeSrc='/app/contractInfo/detailCenter/'+id;
	var iframe = document.createElement('iframe');//动态创建iframe，禁止iframe的src回退；
    iframe.src = iframeSrc;
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.id = 'project-iframe';
    parent.parent.$(".iframe-wrap").html($(iframe));
}
function tableBtnOpt(){
	var $mylist = $("#LAY_table_contract").next('.layui-table-view').find('.layui-table-body table.layui-table');
	/*  点击tr元素,跳转详情基于table*/
	 /* $mylist.on("click",'tr',function(){
			var targetI=$(this);
			var id=$(targetI).children('td').find("span[data-id]").attr("data-id");
			tiaozhuan(id);
			return false;
	  }); 
} */

/* 阻止事件冒泡 */
function preventBubble(event){ //取消事件冒泡
	  var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改为event，IE运行可以，但是其他浏览器就不兼容  
	  if (e && e.stopPropagation) {  
	    e.stopPropagation();  
	  } else if (event) {  
	    event.cancelBubble = true;  
	  }  
}
/* 根据iframe的内容撑开iframe的容器 */

function setHeight() {
	var h = document.body.clientHeight*1;
	
	window.parent.parentHeight(h);
}
function updateBillStatus(id){
	top.layer.confirm('是否确定收款？', function(index){
    	//发送删除请求
    	$.post("/app/contractReceivable/shoukuan",{id:id},function(res){
    		top.layer.msg(res.msg);
    		top.layer.close(index);
    		table.reload('bill',{
    			  page: {
    			    curr: 1 //重新从第 1 页开始
    			  }
    			});
    		setHeight();//更新容器高度
        },"json");
  	});
}
//表单重载
function tableRead(){
	table.reload('bill', {
		  where: { //设定异步数据接口的额外参数，任意设
			  params : {
				  teamId:teamId,
		    	  bill:1,
				  state:state,
				  startdate:startdate,
				  enddate:enddate,
				  type:type
				}
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		});
}
</script>
</html>